<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>标题</span>
            </div>
        </template>
        <div>
            <el-form :model="form" :rules="formRules" ref="formRef" label-width="120px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="onRest">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>标题</span>
            </div>
        </template>
        <div>
            <el-form :model="Passform" :rules="PassFormRules" label-width="120px">
                <el-form-item label="新密码" prop="new_password">
                    <el-input v-model="Passform.new_password" />
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirm_password">
                    <el-input v-model="Passform.confirm_password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="onRest">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'vueB',
    data () {
        // 自定义效验规则
        const checkNewOldPassword = (rule, value, callback) => {
            if (value != this.Passform.new_password) {
                callback(new Error('两次输入密码不一致！'))
            } else {
                return callback()
            }
        }
        return {
            form: {
                name: '',
                age: '',
                sex: ''
            },
            formRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在2到5个字符', trigger: 'blur' }
                ],
                age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
                sex: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
            },
            Passform: {
                new_password: '',
                confirm_password: ''
            },
            PassFormRules: {
                new_password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                confirm_password: [
                    { required: true, message: '请确认新密码', trigger: 'blur' },
                    { validator: checkNewOldPassword, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        onSubmit () {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    // 如果valid为true说明表单效验满足
                    console.log(this.form)
                } else {
                    console.log('表单格式错误！')
                }
            })
        },
        onRest () {
            this.$refs.formRef.resetFields()
        }
    }
}
</script>
